Panda CSS
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
chakra-ui/panda: 🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️
Chakra UIの進化の一部
panda単体で見れば
Tailwind CSSの以下の課題を解消
class 定義が煩雑になる
型安全ではない
Design Tokensのサポート
Atomic CSS&CSS in JS&compile
ショートハンド記法は便利だけど、あまり依存したくないなぁ
各プロパティ内に条件やメディアクエリツッコめるのは便利
どういう出力？
複雑化しない？
Patternsの使うタイミング難しい
正直直接css風に書きたい。
JSXとclassNameの使い分け難しい
jsx側だとcoponentのpropとごちゃつきそう？
Recipes
componentに当てるスタイルの定義に利用する？
variantsの使い心地は良さそう
cvaってなんだ？
Class Variance Authority cvaからインスピレーションを受けた独自の専用関数
Tailwind CSSとの比較
https://newsletter.baptiste.devessier.fr/archive/my-first-impressions-of-panda-css/
いい感じで言語化してくれている。基本同意。
https://zenn.dev/cybozu_frontend/articles/panda-output#recipes-の出力結果
いい記事。
panda css、Storybook先行で作っていると、アプリケーションで利用されていないStyleが反映されていなくて困る時あるので、仕組みを理解しておきたい。
分岐が発生するなら Recipe
ぐらいの方がいい。